
import Image from "../plugins/image";
import Link from "../plugins/link/element";

export default  (props:any) => {
    const { attributes, children, element }=props;
    
    const style = { textAlign: element?.['style-textAlign'] }
    switch (element.type) {
      case 'block-quote':
        return (
          <blockquote style={style} {...attributes}>
            {children}
          </blockquote>
        )
      case 'bulleted-list':
        return (
          <ul style={style} {...attributes}>
            {children}
          </ul>
        )
        case 'link':
          return (<Link {...props}  />)
      case 'list-item':
        return (
          <li style={style} {...attributes}>
            {children}
          </li>
        )
      case 'numbered-list':
        return (
          <ol style={style} {...attributes}>
            {children}
          </ol>
        )
        case 'image':
      return (<Image.Element {...props} />)

      case 'block':
        return (
          <span style={{...style,paddingLeft:1}}  {...attributes}>{children}</span>
        )
      default:
        return (
          <p style={style} {...attributes}>
            {children}
          </p>
        )
    }
  }